<template>
  <div class="custom-tools-body">
    <consult-tools ref="consult" :trigger="'hover'" placement="left" @callBack="ConsultCallBack">
      <div slot="reference" :class="consult === true ?'active': ''" @mouseenter="openConsult" @mouseleave="closeConsult">
        <el-image :src="consult === false ? consultImageA : consultImageB" />
      </div>
    </consult-tools>
    <setting-tools
      ref="setting"
      :trigger="'hover'"
      placement="left"
      @callBack="SettingCallBack"
      @setting-layout="settingLayout"
      @setting-save="settingSave"
      @setting-back="settingBack"
    >
      <div slot="reference" :class="setting === true ?'active': ''" @mouseenter="openSetting" @mouseleave="closeSetting">
        <el-image :src="setting === false ? settingA : settingB" />
      </div>
    </setting-tools>
  </div>
</template>
<script>
import ConsultTools from './solt/consultTools'
import SettingTools from './solt/settingTools'
export default {
  name: 'DialogTools',
  components: { ConsultTools, SettingTools },
  data() {
    return {
      consult: false,
      setting: false,
      consultImageA: require('@/assets/images/consult.png'),
      consultImageB: require('@/assets/images/consult1.png'),
      settingA: require('@/assets/images/setting2.png'),
      settingB: require('@/assets/images/setting1.png')
    }
  },
  methods: {
    ConsultCallBack(data) {
      this.consult = data
    },
    SettingCallBack(data) {
      this.setting = data
    },
    openSetting() {
      this.setting = true
      this.$refs.setting.triggerOpen()
    },
    openConsult() {
      this.consult = true
      this.$refs.consult.triggerOpen()
    },
    closeSetting() {
      this.setting = false
      this.$refs.setting.triggerClose()
    },
    closeConsult() {
      this.consult = false
      this.$refs.consult.triggerClose()
    },
    settingLayout(data) {
      this.$emit('setting-layout', data)
    },
    settingSave(data) {
      this.$emit('setting-save', data)
    },
    settingBack() {
      this.$emit('setting-back', true)
    }
  }
}
</script>

<style scoped>
.custom-tools-body {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}
</style>
